<template>
  <div class="cart">
    <h2 class="mytitle" v-if="!isshow">购物车空空如也，快去添加您喜爱的商品吧！</h2>
    <table class="mytable" cellspacing="0" cellpadding="0" v-if="isshow">
      <thead>
        <th>选中</th>
        <th>图片</th>
        <th>商品</th>
        <th>价格</th>
        <th>数量</th>
        <th>删除</th>
      </thead>
      <tbody>
        <tr v-for="ele in cart" :key="ele.id">

          <td><input type="checkbox" @change="dan(ele.id)" :checked="ele.checked"></td>
          <td><img :src="ele.img"></td>
          <td>{{ele.title | myslice}}</td>
          <td>{{ele.price}}</td>
          <td><button @click="myjian(ele.id)">-</button>{{ele.count}}<button @click="myjia(ele.id)">+</button></td>
          <td><button @click="del(ele.id)">删除</button></td>
          <!-- <td><button @click="asydel(ele.id)">删除</button></td> -->
          <!-- 以上两种方法一种为同步，一种为异步，经测试均有效 -->
        </tr>
      </tbody>
    </table>
    <table class="sum">
      <thead>
        <th >全选</th>
        <th>总计数量</th>
        <th>选中数量</th>
        <th>总计金额</th>
        <th>选中金额</th>
        <th><button style="width:50px;height:30px;" @click="jumppay">去结算</button></th>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" @click="quan($event)" :checked="isquanxuan"></td>
          <td>{{totalcount}}</td>
          <td>{{targetcount}}</td>
          <td>{{totalprice | fixed}}</td>
          <td>{{targetprice | fixed}}</td>
          <!-- <td><button>去结算</button></td> -->
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
// 结构赋值
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'
export default {
  name: 'Cart',
  computed: {
    ...mapState([
      'cart'
    ]),
    ...mapGetters([
      'totalcount',
      'targetcount',
      'totalprice',
      'targetprice',
      'isquanxuan',
      'isshow'
    ])
  },
  methods: {
    ...mapMutations([
      'del',
      'dan',
      'quan',
      'myjia',
      'myjian'
    ]),
    ...mapActions([
      'asydel'
    ]),
    jumppay () {
      this.$router.push({
        name: 'pay'
      })
    }
  },
  filters: {
    myslice (data) {
      // console.log(data)
      if (data.length > 3) {
        return data.slice(0, 3)
      }
      return data
    },
    fixed (data) {
      return data.toFixed(2)
    }
  }

}
</script>

<style scoped lang="scss">
  .cart{
    width:100%;
    .mytitle{
      text-align:center;
    }
    .mytable{
      width:96%;
      margin:20px auto;
      table-layout: fixed;
      text-align: center;
      font-size:12px;
      tr:nth-child(2n){
        background-color: skyblue;
      }
     img{
       width:50px;
       height: 50px;
     }
    }
    .sum{
      width:96%;
       margin:20px auto;
      table-layout: fixed;
      text-align: center;
      margin-bottom:65px;
      th{
       border-right:1px solid #ccc;
       &:nth-child(1){
         width:30px;
       }
        &:nth-child(2){
         width:50px;
       }
        &:nth-child(3){
         width:50px;
       }
      }
      td{
        border-right:1px solid #ccc;
      }
    }
  }
</style>
